<template>
    <view class="container">
        <view class="course_type_list">
            <scroll-view scroll-x class="tab-h" :scroll-into-view="'tab_'+positionTab" scroll-with-animation='true'>
              <view  v-for="(item,index) in courseTypeList" :key="index" @tap='bindTypeItem(index)' :id="'tab_'+item.id" class='tab-item' :style="{color:positionTab==index?defaultColor:'',}">
                {{item.title}}
                <text class="active_border" :style="{borderBottom:'4rpx solid '+defaultColor}" v-if="positionTab==index"></text>
              </view>
            </scroll-view>
        </view>
        <course-list-component id="coursesList"  v-if="receiveData" :receiveData="receiveData" :params="params"></course-list-component>
        <!-- <view class="course_list" v-if="courseList&&courseList.length!=0">
            <view class="course_item" v-for="(item,index) in courseList" :key="index" :data-url="'course_detail.html?instanceId='+item.id" @tap="tolinkUrl">
                <view class="course_item_left">
                    <image :src="item.banner" class="course_item_banner" mode="aspectFill"></image>
                    <text class="course_item_tag" v-if="item.chapterSectionType==1">专栏</text>
                    <text class="course_item_tag" v-else-if="item.chapterSectionType==2">系列课</text>
                    <text class="course_item_tag" v-else>课程</text>
                </view>
                <view class="course_item_right">
                    <text class="course_item_name">{{item.courseTitle}}</text>
                    <text class="course_item_describe">{{item.description}}</text>
                    <scroll-view class='tags_content' scroll-x v-if="item.tags">
                      <text class='tags_item' v-for='(item,index) in item.tagArray' :key='index'>{{item}}</text>
                    </scroll-view>
                    <view class="course_item_right_bottom">
                        <text class="course_item_num" v-if="item.sectionCount&&item.sectionCount>1">已更新{{item.sectionCount}}课时</text>
                        <text class="course_item_num" v-else></text>
                        <text class="course_item_price_type" v-if="item.coursePrice<=0">免费</text>
                        <text class="course_item_price_type" v-else>￥{{item.coursePrice}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="noproduct" v-else>
          <image mode="widthFix" src='https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120'></image>
          <text>没有相关课程</text>
        </view> -->
    </view>
</template>

<script>
import { socketFun } from "../../wxcomponents/public/json2Form";
export default {
  data() {
    return {
      courseList:null,
      courseTypeList:[],
      setting:null,
      positionTab:0,
      listPage:{
          page: 1,
          pageSize: 20,
          totalSize: 0,
          courseId: 0,
      },
      receiveData:null,
      secondColor:'',
      defaultColor:'',
    };
  },
  props: {},

  /*onload*/
  onLoad: function (options) {
    let that=this;
    console.warn("======onLoad:options======", options, getApp().globalData.setting);
    that.getTypeData();
  },
  onReady: function () {
    
  },
  onShow: function () {
    let that=this;
	that.setData({
        setting:getApp().globalData.setting,
        defaultColor:getApp().globalData.setting.platformSetting.defaultColor,
        secondColor:getApp().globalData.setting.platformSetting.secondColor,
       })
  },
  /* 分享 app.js862行*/
  onShareAppMessage: function () {
    console.log(getApp().globalData.miniIndexPage);
    return getApp().globalData.shareForFx2(getApp().globalData.miniIndexPage);
  },
  onPullDownRefresh: function () {
    let that = this; // 下拉刷新的时候首先判断存不存在tab
    console.log("下拉");
    that.listPage.page=1
    // that.getData(that.listPage);
    // that.selectComponent("#coursesList").setDataFun(that.listPage);
    that.selectComponent("#coursesList").onPullDownRefresh();
    wx.stopPullDownRefresh();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this
    that.selectComponent("#coursesList").onReachBottom();
    // if (that.listPage.totalSize > that.listPage.page * that.listPage.pageSize) {
    //   that.listPage.page++
    //   // that.getData(that.listPage,'upload');
    //   // that.selectComponent("#coursesList").setDataFun(that.listPage);
    // }else{
    //     wx.showToast({
    //       title: "到底了~",
    //       image: '/wxcomponents/images/icons/tip.png',
    //       duration: 1000
    //     });
    // }
  },
  methods: {
    bindTypeItem:function(index){
        let that=this;
        that.positionTab=index;
        that.listPage.page=1
        that.listPage.courseId=that.courseTypeList[index].id
        // that.getData(that.listPage,'upload');
        that.selectComponent("#coursesList").setDataFun(that.listPage);
    },
    /* 获取数据 */
    getTypeData: function (param) {
      var that = this
      let params=Object.assign({},param,{
      })
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_courses.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result
          if (!dataArr || dataArr.length == 0) {
            that.setData({ courseTypeList: [] })
          } else {
            that.setData({ courseTypeList: dataArr })
            that.listPage.courseId=dataArr[that.positionTab].id
            // that.getData(that.listPage,'upload');
            that.setData({receiveData:{jsonData:that.listPage}})
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 获取数据 */
    // getData: function (param) {
    //   var that = this
    //   let params=Object.assign({},param,{
    //   })
    //   console.log("===params==",params)
    //   var customIndex = getApp().globalData.AddClientUrl("/wx_find_courses_instances.html", params)
    //   getApp().globalData.showToastLoading('loading', true)
    //   wx.request({
    //     url: customIndex.url,
    //     header: getApp().globalData.header,
    //     success: function (res) {
    //       wx.hideLoading()
    //       console.log(res.data)
    //       let data=res.data.relateObj.result
    //       that.listPage.pageSize = res.data.relateObj.pageSize
    //       that.listPage.page = res.data.relateObj.curPage
    //       that.listPage.totalSize = res.data.relateObj.totalSize
    //       let dataArr = that.courseList;
    //       let tagArray=[];
    //       for (let i = 0; i < data.length; i++) {
    //         if (data[i].tags && data[i].tags != '') {
    //           tagArray = data[i].tags.slice(1, -1).split("][")
    //           data[i].tagArray = tagArray;
    //         }
    //       }
    //       console.log("===data====",data)
    //       if (param.page == 1) {
    //         dataArr = []
    //       }
    //       if (!data || data.length == 0) {
    //         that.setData({ courseList: null })
    //       } else {
    //         if (dataArr == null) { dataArr = [] }
    //         dataArr = dataArr.concat(data)
    //         that.setData({ courseList: dataArr })
    //         console.log("that.selectComponent",that.selectComponent("#coursesList"))
    //       }
    //       that.selectComponent("#coursesList").setDataFun(dataArr);
    //       wx.hideLoading()
    //     },
    //     fail: function (res) {
    //       console.log("fail")
    //       wx.hideLoading()
    //       getApp().globalData.loadFail()
    //     }
    //   })
    // },
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget.dataset.url;
      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>